<template>
  <section class="main">
    <ul class="todo-list">
      <li class="todo" v-for='(e,i) in list' :key="e.id">
        <div class="view">
          <span class="index">{{i+1}}.</span> 
          <label>{{e.name}}</label>
          <button class="destroy" @click='del(e.id)'></button>
        </div>
      </li>
      <!-- <li class="todo">
        <div class="view">
          <span class="index">2.</span> <label>游泳100米</label>
          <button class="destroy"></button>
        </div>
      </li> -->
    </ul>
  </section>
</template>

<script>
export default {
props:{
  list:{
    type:Array,
    required:true
  }
},
methods: {
  del(id){
    this.$emit('setId',id)
  }
},
}
</script>

<style>

</style>